<!DOCTYPE html>
<html>
<head>
  <title>心理学实验</title>
  <script src="jspsych/jspsych.js"></script>
  <script src="jspsych/plugins/jspsych-rdk.js"></script>
  <script src="jspsych/plugins/jspsych-html-button-response.js"></script>
  <link rel="stylesheet" href="jspsych/css/jspsych.css">
  
  
  <style>
    /* 在这里定义您的布局样式 */
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    #experiment-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f9f9f9;
    }

    #stimulus-container {
      margin-bottom: 20px;
    }

  </style>

</head>
<body>
  <!-- 在这里编写实验的HTML布局 -->
  <div id="experiment-container">
    <div id="stimulus-container">
      <div id="jspsych-experiment"></div>
    </div>
  </div>
  <script>
    // 创建实验流程
    var RDK_trials = [
			{//Condition 1
				correct_choice: 'l', //Condition 1的正确答案
				coherent_direction: 0 //Condition 1 
			},
			{//Condition 2
				correct_choice: 'a', //Condition 2的正确答案
				coherent_direction: 180 //Condition 2 黑点移动转变方向（旋转180°）
			},
      {//Condition 3
				correct_choice: 'l', //Condition 3的正确答案
				coherent_direction: 0 //Condition 3 
			},
			{//Condition 4
				correct_choice: 'l', //Condition 4的正确答案
				coherent_direction: 10 //Condition 4 黑点移动转变方向（旋转10°）
			},
      {//Condition 5
				correct_choice: 'a', //Condition 5的正确答案
				coherent_direction: 170 //Condition 5 
			},
			{//Condition 6
				correct_choice: 'a', //Condition 6的正确答案
				coherent_direction: 180 //Condition 6 黑点移动转变方向（旋转180°）
			},
      {//Condition 7
				correct_choice: 'l', //Condition 7的正确答案
				coherent_direction: 0 //Condition 7 
			},
			{//Condition 8
				correct_choice: 'a', //Condition 8的正确答案
				coherent_direction: 180 //Condition 8 黑点移动转变方向（旋转180°）
			},
		];
    var start_intro = {
      type: 'html-button-response',
      stimulus: '<p style="color: red; font-size: 24px; font-weight: bold;">实验：请判断大多数黑色点的移动方向，向左请按a，向右请按l</p>',
      choices: ['进入实验'],
      prompt: "<p></p>"
    }

    var test_block = {
			type: "rdk",
			post_trial_gap: 500, //两个trail之间的间隔时长
			number_of_dots: 200, //总黑点数量
			choices: ['a', 'l'], //可按的按键
			trial_duration: 2000, //等待时长
			timeline: RDK_trials, //所有流程
			background_color: "white",
			dot_color: "black"
			
		}
    var goodbye = {
      type: 'html-button-response',
      stimulus: '<p style="color: red; font-size: 24px; font-weight: bold;">试验结束，谢谢你的参与</p>',
      choices: ['GoodBye'],
      prompt: "<p></p>"
    }

    // 运行实验
    jsPsych.init({
    timeline: [start_intro,test_block,goodbye],
    display_element: 'jspsych-experiment',
    on_finish: function() {
      jsPsych.data.displayData();
    },
    default_iti: 250
  });
  </script>
</body>
</html>